使用 ngrok 讓本機上的網站讓全世界看到

這個 title 會不會下得太過火？！

回到主要目的，您一定有過這樣的經驗：想測試個功能，卻要大費周章地將程式部署到測試機、發揮創意做的小東西都沒有對外公開的 host 環境可以測試，即使是使用雲端，也是需要經過一些申請跟部署，加上費用也是考量的因素之一，而常常花在這些零碎工作的時間可能都比真正開發的時間要長。

現在我們可以使用 ngrok 這個服務來解決問題：我們可以將自己電腦上的網站透過 ngrok 的對應，讓其他人可以透過 ngrok 提供的網址來瀏覽原本只存在本機上的網站。

看完說明有沒有覺得是個好東西，就讓我們馬上開始吧

1. 如何開始

A. 下載
直接至 下載點 下載對應 os 的版本

B. 解壓縮

如果連網需要透過 proxy 才需要進行下列步驟

1. 先執行下列指令會自動建立 configuration 檔案
   ngrok authtoken 4nq9771bPxe8ctg7LKr_2ClH7Y15Zqe4bWLWF9p

2. authtoken 需經由註冊取得

   • sign up for an account

   

3. 設定 proxy

• 開啟 configuration 檔案

  Windows 預設 configuration 路徑
  C:\Users{username}.ngrok2\ngrok.yml

• 加入 proxy 設定

  http_proxy: "http://user:password@proxyserver:port"

如果連網需要透過 proxy 才需要進行上述步驟

2. 執行

ngrok http port

e.g. ngrok http 80 表示使用 http 80 port

• 預設同時啟用 http 及 https

3. 取得可連線的 url

A. ngrok

B. Web Interface

• 服務開啟後，預設會建立 Web Interface 來提供相關資訊
• 預設是 http://127.0.0.1:4040/

4. 即時偵測網站資源被呼叫狀況

會列出網站相關資料被存取的紀錄，及使用的 http verb

A. ngrok

B. Web Interface

5. 檢視 request 及 response 細節

• 可以確認收到的 header 與 body 是否正確

6. 重新執行 request

7. 加上網址存取密碼

ngrok http -auth="username:password" 80

• 設定帳號 及密碼，加強資安控管

8. 其他一堆設定......

請大家上 ngrok 文件 更深入了解

結果

可以由 ngrok 動態提供的 url access，結果與 localhost 網站完成相同

參考資料

1. ngrok 官網
2. ngrok 文件